<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分期界面</title>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }
    </style>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body onload="loadPage()">
<div class="container">
    <div class="panel panel-info text-center" style="margin-top: 50px;">
        <!--        <form method="post" action="/TemporaryInstallment/insertInstallmentApply">-->
        <div class="panel-heading" style="letter-spacing:30px;">
            <h3 id="title">账单分期页面</h3>
        </div>
        <div class="panel-body">
            <input type="hidden">
            <table class="table table-condensed table-responsive table-hover text-left">
                <thead class="tab-header-background">
                <tr>
                    <th scope="col" colspan="4" style="text-align: center;font-size: 18px;font-weight: bold">分期申请
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row" style="width: 25%;">#</th>
                    <th scope="row" style="width: 25%;">服务名称</th>
                    <th scope="row" style="width: 25%;">查询结果</th>
                    <th scope="row" style="width: 25%;">备注</th>
                </tr>

                <tr>
                    <th scope="row">1</th>
                    <td>信用卡账户</td>
                    <td id="creditcardNumber" th:text="${temporaryInstallment.creditcardNumber}" disabled>
                        <!--                        <input id="creditcardNumber2" th:value="${TemporaryInstallment.creditcardNumber}" disabled>-->
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>账户总金额</td>
                    <td id="ccmsUserLimit" th:text="${temporaryInstallment.ccmsUserLimit}" disabled>
                    </td>
                    <td>账户总额度</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>账单月份</td>
                    <td id="ccmsBillCreate" th:text="${temporaryInstallment.ccmsBillCreate}" disabled>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>当月消费金额</td>
                    <td id="ccmsBillAmount" th:text="${temporaryInstallment.ccmsBillAmount}">
                    </td>
                    <td>当月消费金额</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>最高可分期金额</td>
                    <td id="maxInstallment" th:text="${temporaryInstallment.maxInstallment}">
                    </td>
                    <td>当月消费金额</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>申请分期金额</td>
                    <td>
                        <!--                        <input type="number" id="appl" onkeypress="displayResult()>-->
                        <input type="number" value="0" id="installmentMoney" onkeyup="displayResult()">
                    </td>
                    <td>还款于当月消费</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>分期数</td>
                    <td>
                        <select id="installmentDateId" class="form-control">
                        </select>
                    </td>
                    <td>不同的分期利息占额</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>分期结果</td>
                    <td>
                        分期首月应还<span id="this" style="color: red">0</span><br>
                        分期次月应还<span id="later" style="color: red">0</span>
                        <!--本金:<span id="benjin" style="background-color: red">0</span>
                        利息:<span id="lixi" style="background-color: red">0</span>-->
                    </td>
                    <td>结果仅供参看,具体结果看审核后</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>账单剩余应还</td>
                    <td id="paySurplus" th:text="${temporaryInstallment.ccmsBillAmount}"></td>
                    <td>本月分期成功后最低还款</td>
                </tr>
                </tbody>
                <tr>
                    <td></td>
                    <td colspan="2" id="btn">
                        <button id="btnn" type="button" class="btn btn-block btn-primary btn-lg"
                                disabled="disabled">申请分期
                        </button>
                    </td>
                    <td></td>
                    <td id="fenqi"></td>
                </tr>
            </table>
            <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++模态框+++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button id="myclose" type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">×
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                提示:
                            </h4>
                        </div>
                        <div class="modal-body">
                            <span id="myMsg">

                            </span>
                        </div>
                        <div class="modal-footer">
                            <button id="myreturn" type="button" class="btn btn-default"
                                    data-dismiss="modal">回到主页面
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++模态框+++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
            <div class="panel-footer text-right">
                <input id="myclose2" type="hidden" th:value="0">
                <input id="ccmsUserLimit2" type="hidden" th:value="${temporaryInstallment.ccmsUserLimit}">
                <input id="billId" type="hidden" th:value="${temporaryInstallment.billId}">
                <input id="ccmsBillAmount2" type="hidden" th:value="${temporaryInstallment.ccmsBillAmount}">
                <input id="paySurplus2" type="hidden" th:value="${temporaryInstallment.ccmsBillAmount}">
                <input id="maxInstallment2" type="hidden" th:value="${temporaryInstallment.maxInstallment}">
                <!--                        信用-->
                <input id="ccmsUserCreditrating" type="hidden" th:value="${temporaryInstallment.ccmsUserCreditrating}">
                八仙过海项目组版权所有
            </div>
        </div>
        <!--        </form>-->
    </div>
</div>
</body>
<script>
    function loadPage() {
        $("#paySurplus2").text(milliFormat($("#ccmsBillAmount2").val()));
        var creditcardNumber = $("#creditcardNumber").text();
        $.ajax({
            url: "/creditType/selectInterestRate?cardnum=" + creditcardNumber,
            dataType: "JSON",
            success: function (data) {
                //禁用申请按钮
                var btn = "<button type=\"button\" class=\"btn btn-block btn-primary btn-lg\" disabled=\"disabled\">申请还款</button>";
                $("#btn").html(btn);
                var htmls = "<option value=\"3\">3期" + valueToPercent(data.threeStage) + "%</option>";
                htmls += "<option value=\"6\">6期" + valueToPercent(data.sixStage) + "%</option>";
                htmls += "<option value=\"9\">9期" + valueToPercent(data.nineStage) + "%</option>";
                htmls += "<option value=\"12\">12期" + valueToPercent(data.twelveStage) + "%</option>";
                htmls += "<option value=\"18\">18期" + valueToPercent(data.eighteenStage) + "%</option>";
                htmls += "<option value=\"24\">24期" + valueToPercent(data.twentyfourStage) + "%</option>";
                $("#installmentDateId").html(htmls);
                // var fenqi = "<input type=\"hidden\" id=\"installmentDateId3\" value="+ data.twelveStage + ">";
                var fenqi = "<input type=\"hidden\" id=\"installmentDateId3\" value=" + data.threeStage + ">";
                fenqi += "<input type=\"hidden\" id=\"installmentDateId6\" value=" + data.sixStage + ">";
                fenqi += "<input type=\"hidden\" id=\"installmentDateId9\" value=" + data.nineStage + ">";
                fenqi += "<input type=\"hidden\" id=\"installmentDateId12\" value=" + data.twelveStage + ">";
                fenqi += "<input type=\"hidden\" id=\"installmentDateId18\" value=" + data.eighteenStage + ">";
                fenqi += "<input type=\"hidden\" id=\"installmentDateId24\" value=" + data.twentyfourStage + ">";
                $("#fenqi").html(fenqi);
                alter();
            }
        })

    }

    function alter() {
        $("#ccmsUserLimit").text(milliFormat($("#ccmsUserLimit2").val()));
        $("#ccmsBillAmount").text(milliFormat($("#ccmsBillAmount2").val()));
        $("#paySurplus").text(milliFormat($("#paySurplus2").val()));
        $("#maxInstallment").text(milliFormat($("#maxInstallment2").val()));
    }

    //数字千位分隔符，可操作小数
    function milliFormat(num) {
        return num && num.toString()
            .replace(/\d+/, function (s) {
                return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            })
    }

    //将小数转成百分数
    function valueToPercent(value) {
        value = value + '';
        const pointIndex = value.indexOf('.');
        if (pointIndex === -1) return (value - 0) * 100;
        const powIndex = value.length - pointIndex - 1;
        return (value.replace('.', '') - 0) * Math.pow(10, 2 - powIndex);
    }

    //分几期变动
    $("#installmentDateId").change(function () {
        displayResult();
    })

    $("#btn").on("click", "#btnn", function () {
        var schoolList = {
            //所属账单id
            "billId": $("#billId").val(),
            //分期金额
            "installmentMoney": $("#installmentMoney").val(),
            //分期次数
            "installmentDateTime": $("#installmentDateId").val(),
            //分期利息
            "interest": $("#installmentDateId" + $("#installmentDateId").val()).val(),
        }
        $.ajax({
            type: "POST",
            url: "/installment/insertInstallmentApply",
            contentType: "application/json", //必须这样写
            dataType: "json",
            data: JSON.stringify(schoolList),//schoolList是你要提交是json字符串
            success: function (data) {
                alert(data);
                if (data.data=1){
                    $('#myModal').modal('show');
                    $("#myMsg").text(data.message);
                }
            },
            error: function () {
                alert(">>>>>>>>>>>>>>>")
            }

        })
    })


    function displayResult() {
        var reg = /()|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        var bailPayMoney = parseFloat($('#installmentMoney').val());
        if (reg.test(bailPayMoney) && parseInt($("#myclose2").val())==0) {
            //账户最大可分期金额
            var maxInstallment2 = parseFloat($("#maxInstallment2").val());
            //用户选择的分期次数
            var sum = parseInt($("#installmentDateId").val());
            //分期的利率
            var interest = $("#installmentDateId" + sum).val();
            //用户要分期的金额
            var canInstalment = parseFloat($("#installmentMoney").val());
            //用户当月消费金额
            var monthly = parseFloat($("#ccmsBillAmount2").val());
            //判断要分期金额有没有超过可分期金额
            if ((canInstalment <= maxInstallment2) && canInstalment > 0) {
                //开始分期   利息加本金
                var extra = (parseInt(canInstalment) + (parseInt(canInstalment) * interest)).toFixed(2);
                // 次月
                var period = (extra / sum).toFixed(2);//平均利息加本金
                $("#later").text(period)
                //首月
                var first = extra - (period * (sum - 1));
                $("#this").text(first.toFixed(2))
                $("#paySurplus2").val(monthly - canInstalment);
                //恢复申请按钮
                // $("#btnn").attr("disabled",first);
                var btn = "<button id=\"btnn\" type=\"button\" class=\"btn btn-block btn-primary \">申请分期</button>";
                $("#btn").html(btn);
                alter()
            } else {
                //禁用申请按钮
                // $("#btnn").attr("disabled",true);
                var btn = "<button type=\"button\" class=\"btn btn-block btn-primary \" disabled=\"disabled\">申请分期</button>";
                $("#btn").html(btn);
                $("#paySurplus2").val(monthly);
                $("#this").text(0.00)
                $("#later").text(0.00)
                alter();
            }
        } else {
            //禁用申请按钮
            // $("#btnn").attr("disabled",true);
            var btn = "<button type=\"button\" class=\"btn btn-block btn-primary \" disabled=\"disabled\">申请分期</button>";
            $("#btn").html(btn);
            $("#paySurplus2").val(monthly);
            $("#this").text(0.00)
            $("#later").text(0.00)
            alter();
        }
    }
    //    模态框
    $("#myreturn").click(function () {
        window.location.href="/credit/myAllCredit";
    })
    $("#myclose").click(function () {
        $("#myclose2").val(1);
        var btn = "<button type=\"button\" class=\"btn btn-block btn-primary \" disabled=\"disabled\">申请分期</button>";
        $("#btn").html(btn);


    })

</script>
</html>